<template>
	<view>
		<view class="beijing ">
			<dsl-navbar :bgTopImg='bgTopImg' title="团长中心" isBack="true" :textTitle='textTitle'
				:backBg="titleRightStyle"></dsl-navbar>
			<view class="row padding-right justify-between align-center margin-top margin-left">
				<view style="width: 400rpx;" class="flex align-center ">
					<image class="headImg" :src="isUserLogin?userInfo.mainImg:'/static/user/userImg.png'"
						mode="aspectFill">
					</image>
					<view class="crow ml20">
						<view class="fs30 cfff one_overflow" style="width: 240rpx;">
							{{isUserLogin?userInfo.name:'游客'}}
						</view>
						<view class="fs24 mt15 align-center cfff">
							<text> 身份：{{'团长'}}</text>
							<image src="/static/user/icon_tuanzhang.png" mode="" style="width: 30rpx;height: 30rpx;"
								class="margin-left-xs"></image>
						</view>
						<!-- vip {{isUserLogin?userInfo.vip:'0'}} -->
					</view>
				</view>
				<!-- <image src="/static/icon_shezhi.png" mode="" style="width: 40rpx;height: 40rpx;"
					@click.stop="$tools.push('/pages/user/modules/setting')"></image> -->
			</view>
		</view>
		<view class="rowjc margin-top" style="margin-top: 100rpx;"
			@click="$tools.push('/pages/user/modules/wallet/wallet')">
			<view class="wallet crowjb">
				<view>
					<view style="padding: 20rpx;" class="rowjbic">
						<view class="fs28 c333">我的钱包</view>
						<view class="align-center">
							<view class="fs24 c666 ">资金明细</view>
							<text class="cuIcon-right"></text>
						</view>
					</view>
					<view class="crowic">
						<view class="line"></view>
					</view>
				</view>
				<view class="crowic">
					<view class="fs50 c000 fwb">{{userInfo.amount || '0.00'}}</view>
				</view>
				<view class="crowic">
					<view class="chongzhi">明细</view>
				</view>
			</view>
		</view>
		<view class="margin-tb bg-white padding rowsa">
			<view v-for="(item,index) in orderTitles" :key="index" @click="orderAvtive = index">
				<view :class="{'active_title':index == orderAvtive}">{{item.title}}</view>
				<view class="active_heng" :class="{'active_heng1':index ==orderAvtive}"></view>
			</view>
		</view>
		<view v-if="orderList && orderList.length">
			<view class="bg-white margin radius padding order_body" v-for="(item,index) in orderList" :key="index">
				<view class="text-sm text-gray">订单编号：{{item.orderNo}}</view>
				<view class="flex margin-tb">
					<image :src="item.orderDetail.tourImg" class="order_image"></image>
					<view class="margin-left">
						<view class="one_overflow order_title">{{item.orderDetail.tourName}}</view>
						<view class=" order_num margin-top-xs">数量：{{item.orderDetail.number}}</view>
						<view class="order_num order_pay ">￥{{item.payPrice}}</view>
					</view>
				</view>
				<view class="flex justify-end">
					<!-- <view class="order_submit_1" v-if="orderAvtive !=2" @click="post_cancelOrder(item)">取消订单</view> -->
					<!-- <view class="order_submit_2" v-if="orderAvtive == 0">立即支付</view> -->
					<!-- <view class="order_submit_2" v-if="orderAvtive == 1" @click="post_refundOrder(item)">申请退款</view> -->
				</view>
			</view>
		</view>
		<view v-else>
			<moreLoading></moreLoading>
		</view>

	</view>
</template>

<script>
	import {
		getcaptainInfo,
		getorderListForCaptain
	} from '@/common/path.js'
	export default {
		data() {
			return {
				userInfo: {},
				isUserLogin: false, //已登录
				//顶部导航
				bgTopImg: 'rgba(255, 255, 255, 0.0)',
				textTitle: '#FFFFFF',
				titleRightStyle: '#FFFFFF',


				orderTitles: [{
						id: 1,
						title: '待支付'
					},
					{
						id: 2,
						title: '已支付'
					},
					{
						id: 3,
						title: '申请退款'
					}
				],
				orderAvtive: 0, //默认选中状态
				orderList: [], //订单列表
			}
		},
		onShow() {
			this.getcaptainInfo()
		},
		watch: {
			orderAvtive() {
				if (this.isUserLogin) {
					this.getorderListForCaptain()
				}
			}
		},
		methods: {
			//滑动完成后触发
			onPageScroll(event) {
				// console.log(event.scrollTop);
				let backImg
				if (event) {
					backImg = `rgba(255, 255, 255, ${(event.scrollTop-100)/20})`
					if ((event.scrollTop - 100) / 20 > 0.3) {
						this.textTitle = 'gray'
						this.titleRightStyle = 'gray'
					} else if ((event.scrollTop - 100) / 20 > 0.7) {
						this.textTitle = '#000000'
						this.titleRightStyle = '#000000'
					} else {
						this.textTitle = '#FFFFFF'
						this.titleRightStyle = '#FFFFFF'
					}
					// console.log('多少',backImg);
				} else {
					backImg = `rgba(255, 255, 255, ${(event.scrollTop-100)/20})`
				}
				this.bgTopImg = backImg;
			},

			//获取用户信息
			getcaptainInfo() {
				let data = {
					userId: uni.getStorageSync('userInfo').id
				}
				this.Http.POST(getcaptainInfo, data)
					.then((res) => {
						console.log('[团长信息]', res);
						if (res.code == 0) {
							this.userInfo = res.data
							this.isUserLogin = true
							this.getorderListForCaptain()
						} else {
							this.isUserLogin = false
							let _this = this
							uni.showModal({
								title: '温馨提示',
								content: res.msg,
								success: function(Res) {
									if (Res.confirm) {
										uni.navigateBack({
											delta: 1
										})
									} else if (Res.cancel) {
										uni.navigateBack({
											delta: 1
										})
									}
								}
							})
						}
					})
			},
			//团长订单列表
			getorderListForCaptain() {
				let data = {
					captainId: this.userInfo.id, //团长id
					orderState: this.orderAvtive, //订单状态
				}
				this.Http.POST(getorderListForCaptain, data)
					.then((res) => {
						if (res.code == 0) {
							this.orderList = res.data
						} else {
							this.$tools.showToast(res.msg)
						}
					})
			},
			goPeoplePage() {
				if (!this.isUserLogin) { //未登录
					this.$tools.push('/pages/wxLogin/wxLogon')
				} else {
					this.$tools.push('/pages/user/modules/userInfo')
				}
			},
		}
	}
</script>

<style>
	page {
		background-color: #F1F1F1;
	}

	.beijing {
		width: 750rpx;
		height: 387rpx;
		background: #4284DB;
		/* fallback for old browsers */
		background: -webkit-linear-gradient(to right, #29EAC4, #4284DB);
		/* Chrome 10-25, Safari 5.1-6 */
		background: linear-gradient(to right, #29EAC4, #4284DB);
		/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
		border-radius: 0 0 15% 15%;
		box-sizing: border-box;
	}

	.headImg {
		width: 88rpx;
		height: 88rpx;
		background-color: #eee;
		border-radius: 50%;
	}

	.wallet {
		padding-bottom: 30rpx;
		box-sizing: border-box;
		width: 710rpx;
		height: 300rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-top: -150rpx;
	}

	.classfity {
		width: 710rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 20rpx 20rpx 0rpx;
		box-sizing: border-box;
	}

	.line {
		width: 650rpx;
		height: 1rpx;
		background-color: #EEEEEE;
	}

	.chongzhi {
		height: 60rpx;
		width: 120rpx;
		background-color: #29EAC4;
		font-size: 32rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 30rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.oneRow {
		height: 88rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}

	page {
		background: #F6F6F6;
	}

	//选中状态
	.active_heng {
		background-color: #2BD6C7;
		height: 4rpx;
		opacity: 0
	}

	.active_heng1 {
		opacity: 1 !important;
	}

	.active_title {
		color: #2BD6C7;
	}


	.order_image {
		width: 124rpx;
		height: 124rpx;
		background: #EEEEEE;
		opacity: 1;
	}

	.order_title {
		width: 400rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #3D3C3C;
		opacity: 1;
	}

	.order_num {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #AEADAD;
		opacity: 1;
	}

	.order_pay {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #DE1010;
		opacity: 1;
		margin-top: 5rpx;
	}

	.order_submit_1 {
		width: 139rpx;
		height: 49rpx;
		background: #F8F8F8;
		opacity: 1;
		border-radius: 25rpx;
		line-height: 49rpx;
		text-align: center;
		color: #A1A1A1;
	}

	.order_submit_2 {
		width: 139rpx;
		height: 49rpx;
		background: #38DFB0;
		opacity: 1;
		border-radius: 25rpx;
		line-height: 49rpx;
		text-align: center;
		color: white;
		margin-left: 30rpx;
	}

	.order_body {
		box-shadow: 0rpx 3rpx 6rpx rgba(0, 0, 0, 0.07);
	}

	.oneRowImg {
		width: 40rpx;
		height: 40rpx;
	}

	.jiantouImg {
		width: 15rpx;
		height: 20rpx;
	}
</style>
